<template>
  <div class="laywer-detail">
    <div class="banner container-fuild text-center">律师服务</div>
    <div class="container">
      <el-card class="box-card">
        <div class="card-container">
          <h4>山东大学法学院，法学学士</h4>
          <h2>陈律师</h2>
          <div class="at-container">
            <div>合同<br>纠纷</div>
            <div>人身侵<br>权损害</div>
            <div>建筑<br>工程</div>
            <div>企业公<br>司法务</div>
            <div>保险理<br>赔领域</div>
          </div>
          <p style="width: 400px;">联系方式：<span>15546548888</span></p>
          <p style="width: 300px;">收费标准：<span>1小时10块</span></p>
          <p style="width: 500px;">社会职务：<span>北京市律师协会申请执业人员管理与考核工作委员会副主任； </span></p>
          <!-- <el-button icon="el-icon-s-tools" type="primary">金点子服务</el-button> -->

          <el-popover
            placement="right"
            width="400"
            trigger="click">
            <p style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">需要支付费用199元，支付后可咨询该律师!</p>
            <div class="pay-box">
              <div @click="viewPay">
                <img src="../assets/img/laywer.png" alt="">
                <span>微信支付</span>
              </div>
              <div>
                <img src="../assets/img/laywer.png" alt="">
                <span>支付宝支付</span>
              </div>
            </div>
            <el-button type="primary" icon="el-icon-s-tools" slot="reference">金点子服务</el-button>
          </el-popover>
          <span class="idea-span">注：金点子服务需要支付法律问答相关费用 </span>

          <div class="laywer-container"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "LaywerDetail",
  data() {
    return {
      id: "",
      logined: false
    };
  },
  mounted() {
    this.id = this.$route.params.id || 123;
    var wow = new WOW();
    wow.init();
  },
  methods: {
    viewPay() {

    }
  }
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 300px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.container {
  margin: 40px auto;
}

.card-container {
  display: flex;
  flex-direction: column;
  position: relative;
}
.at-container {
  display: flex;
  justify-content: space-between;
  width: 500px;
}
.at-container div {
  background: #409eff;
  border-radius: 4px;
  padding: 10px;
  color: #fff;
  line-height: 18px;
}
/deep/ .el-card__body p {
  margin: 10px 0;
  background: #eee;
  padding: 10px;
}
/deep/ .el-card__body .el-button {
  width: 200px;
}
/deep/ .el-card__body .idea-span {
  font-size: 12px;
  color: #ccc;
  margin-top: 10px;
}
.laywer-container {
  position: absolute;
  background-image: url("../assets/img/laywer.png");
  top: 20px;
  right: 0;
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.pay-box {
  width: 160px;
  margin: 10px auto;
  height: 80px;
  display: flex;
  justify-content: space-between;
}
.pay-box img {
  width: 40px;
  height: 40px;
}
.pay-box span {
  color: #ccc;
  font-size: 12px;
}
</style>
